<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<title>Screen Size Aware Demo</title>

	<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','FixedSplitter']"></script>
	<script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="async: true, parseOnLoad: true, mblAlwaysHideAddressBar: true"></script>

	<script type="text/javascript">
		require([
			"dojo/_base/connect",
			"dojo/data/ItemFileWriteStore",
			"dojo/dom-construct",
			"dojo/ready",
			"dijit/registry",
			"dojox/mobile/Heading",
			"dojox/mobile/ScrollableView",
			"dojox/mobile/EdgeToEdgeDataList",
			"dojox/mobile/parser",
			"dojox/mobile",
			"dojox/mobile/compat",
			"dojox/mobile/FixedSplitter",
			"dojox/mobile/ScreenSizeAware",
			"dojox/mobile/Container"
		], function(connect, ItemFileWriteStore, domConstruct, ready, registry, Heading, ScrollableView, EdgeToEdgeDataList){
			var viewCache = {};
			function leftItemSelected(e){
				var item = e ? registry.getEnclosingWidget(e.target) : registry.byId("list1").getChildren()[0];
				if(!item){ return; }
				var id = viewCache[item.data];
				if(!id){
					// Dynamically creates a new view
					id = item.id ? item.id + "View" : undefined;
					var view = new ScrollableView({
						id: id
					}, domConstruct.create("DIV", null, "rightPane"));
					id = viewCache[item.data] = view.id;

					var heading = new Heading({
						label: item.label,
						back: "Home",
						moveTo: "view1",
						fixed: "top"
					});
					view.addFixedBar(heading);

					var store = new ItemFileWriteStore({url: item.data});
					var list = new EdgeToEdgeDataList({
						store: store
					});
					list.placeAt(view.containerNode);

					this.updateBackButton();
					this.updateTransition();

					view.startup();
				}
				item.transitionTo(id);
			}
			function leftItemsLoaded(){
				if(!ssa.isPhone()){
					ssa.leftItemSelected();
					ssa.updateSelectedItem();
				}
			}
			ready(function(){
				connect.connect(registry.byId("list1").domNode, "onclick", ssa, leftItemSelected);
				connect.connect(registry.byId("list1"), "onComplete", null, leftItemsLoaded);
				connect.connect(ssa, "leftItemSelected", ssa, leftItemSelected);
				connect.connect(ssa, "getDestinationId", null, function(item){
					return viewCache[item.data];
				});
			});
			store1 = new ItemFileWriteStore({url: "data/insurance.json"});
		});
	</script>

	<style>
	html, body{
		height: 100%;
		overflow: hidden;
		position: relative;
	}
	.iphone_theme #leftPane, .blackberry_theme #leftPane {
		border-right: 1px solid black;
	}
	.android_theme #leftPane {
		border-right: 1px solid gray;
	}
	</style>
</head>
<body style="visibility:hidden;">
	<span data-dojo-id="ssa" data-dojo-type="dojox.mobile.ScreenSizeAware"></span>
	<div data-dojo-type="dojox.mobile.FixedSplitter" data-dojo-props='orientation:"H"'>
		<div id="leftPane" data-dojo-type="dojox.mobile.Container" style="width:300px;">
			<div id="view1" data-dojo-type="dojox.mobile.ScrollableView">
				<h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Insurance</h1>
				<ul data-dojo-type="dojox.mobile.EdgeToEdgeDataList" id="list1" data-dojo-props='store:store1, query:{label: "*"}, stateful:true'></ul>
			</div>
		</div>

		<div id="rightPane" data-dojo-type="dojox.mobile.Container"></div>
	</div>
</body>
</html>
